<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="plujins/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <style>
        .container-fluid{
            background-color: pink;
            height: 200px;
        }
    </style>
    <title>下拉inpt菜单</title>
</head>
<body>
<div class="objectChild">
    <form class="bs-example bs-example-form dropdownAndInputForm center" role="form">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group ">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="text">一级</span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdownAndInput">
                            <li>
                                <a  class="option">nginx</a>
                            </li>
                            <li>
                                <a  class="option">php</a>
                            </li>
                            <li>
                                <a  class="option">mysql</a>
                            </li>
                            <li>
                                <a  class="option">docker</a>
                            </li>
                            <li>
                                <a  class="option">kvm</a>
                            </li>
                        </ul>
                    </div><!-- /btn-group -->
                    <div class="changeDiv "  style="width: 150px">
                        <input  type="text" class="form-control input" value="123">
                    </div><!--/chengrDiv-->
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form>
</div>

<form class="bs-example bs-example-form dropdownAndInputForm changeTarget hidden" role="form"> <!--这一区域默认是隐藏的,其负责给点击"服务和容器"添加数据-->
    <div class="row">
        <div class="col-lg-6">
            <div class="input-group">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        <span class="text">二级</span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdownAndInput">
                        <li>
                            <a class="option">nginx</a>
                        </li>
                        <li>
                            <a  class="option">php</a>
                        </li>
                        <li>
                            <a  class="option">mysql</a>
                        </li>
                    </ul>
                </div><!-- /btn-group -->
                <input  type="text" class="form-control input"  style="width: 100px">
            </div><!-- /input-group -->
        </div><!-- /.col-lg-6 -->
    </div><!-- /.row -->
</form> <!--这一区域默认是隐藏的,其负责给点击"服务和容器"添加数据-->

<!--<div class="container-fluid">-->
<!--    <div style="padding: 100px 100px 10px;" class="a">-->
<!--        <form class="bs-example bs-example-form dropdownAndInputForm" role="form" id="A">-->
<!--            <div class="row">-->
<!--                <div class="col-lg-6">-->
<!--                    <div class="input-group">-->
<!--                        <div class="input-group-btn">-->
<!--                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">一级-->
<!--                                <span class="caret"></span>-->
<!--                            </button>-->
<!--                            <ul class="dropdown-menu dropdownAndInput">-->
<!--                                <li>-->
<!--                                    <a  class="b">nginx</a>-->
<!--                                </li>-->
<!--                                <li>-->
<!--                                    <a  class="b">php</a>-->
<!--                                </li>-->
<!--                                <li>-->
<!--                                    <a  class="b">mysql</a>-->
<!--                                </li>-->
<!--                                <li>-->
<!--                                    <a  class="b">docker</a>-->
<!--                                </li>-->
<!--                                <li>-->
<!--                                    <a  class="b">kvm</a>-->
<!--                                </li>-->
<!--                            </ul>-->
<!--                        </div>&lt;!&ndash; /btn-group &ndash;&gt;-->
<!--                        <div class="changeDiv">-->
<!--                            <input  type="text" class="form-control input">-->
<!--                        </div>-->
<!--                    </div>&lt;!&ndash; /input-group &ndash;&gt;-->
<!--                </div>&lt;!&ndash; /.col-lg-6 &ndash;&gt;-->
<!--            </div>&lt;!&ndash; /.row &ndash;&gt;-->
<!--        </form>-->
<!--    </div>-->
<!--    <form class="bs-example bs-example-form dropdownAndInputForm changeTarget hidden" role="form" id="B">-->
<!--            <div class="row">-->
<!--                <div class="col-lg-6">-->
<!--                    <div class="input-group">-->
<!--                        <div class="input-group-btn">-->
<!--                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">-->
<!--                                <span class="text">二级</span>-->
<!--                                <span class="caret"></span>-->
<!--                            </button>-->
<!--                            <ul class="dropdown-menu dropdownAndInput">-->
<!--                                <li>-->
<!--                                    <a class="b">nginx</a>-->
<!--                                </li>-->
<!--                                <li>-->
<!--                                    <a  class="b">php</a>-->
<!--                                </li>-->
<!--                                <li>-->
<!--                                    <a  class="b">mysql</a>-->
<!--                                </li>-->
<!--                            </ul>-->
<!--                        </div>&lt;!&ndash; /btn-group &ndash;&gt;-->
<!--                        <input  type="text" class="form-control input">-->
<!--                    </div>&lt;!&ndash; /input-group &ndash;&gt;-->
<!--                </div>&lt;!&ndash; /.col-lg-6 &ndash;&gt;-->
<!--            </div>&lt;!&ndash; /.row &ndash;&gt;-->
<!--        </form>-->
<!--</div>-->
</body>
<script src="js/jquery-3.2.js"></script>
<script src="plujins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>
    $('.objectChild').click(function (event){
        console.log("单元格被点击了")
        if($(event.target).hasClass("option")){//这是确定了点击的是ul-li-a
            let htmlText=$(event.target).html();
            if(htmlText=="docker"||htmlText=="kvm"){
                let changeTargetObj=$(".changeTarget")//数据源
                changeTargetObj.find('.text').html(htmlText)//替换数据源中显示的标题为docker或kvm
                $(".changeDiv").html(changeTargetObj.html())//把数据源赋值给目标区域
            }else{//如果这个a标签的内容不是docker或kvm,就可以把a的内容赋值给input
                $(event.target).closest('.dropdownAndInputForm').find('.input').val(htmlText)

                let virtualType=$(event.target).closest('.input-group-btn').find('.text').html()
                $(event.target).closest('.dropdownAndInputForm').find('.input').attr("virtualType",virtualType)
            }
        }else{
        }
    })
</script>
</html>